<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementByName</title>
    <script type="text/javascript">
        //全选
        function checkAll() {
            //getElementByName() 是根据 指定的name属性查询返回多个标签对象集合
            //这个集合的操作跟数组一样
            //集合中每个元素都是dom对象
            //这个集合中的元素顺序是他们在HTML页面中从上到下的顺序
            var hobbys = document.getElementsByName("hobby");
            //返回集合的长度
            alert(hobbys.length);
            //checked表示复选框的选中状态，选中是true，否则是false
            alert(hobbys[0].checked);//选中了java则返回true
            //checked属性可读可写，全选表示：
            for (var i = 0; i < hobbys.length; i++) {
                hobbys[i].checked = true;
            }
        }

        //全不选
        function checkNone() {
            var hobbys = document.getElementsByName("hobby");
            //checked设置为false
            for (var i = 0; i < hobbys.length; i++) {
                hobbys[i].checked = false;
            }
        }

        //反选
        function checkReverse() {
            var hobbys = document.getElementsByName("hobby");

            for (var i = 0; i < hobbys.length; i++) {
                //方法一: if判断
                if (hobbys[i].checked) {
                    hobbys[i].checked = false;
                } else {
                    hobbys[i].checked = true;
                }
                //方法二: 取相反值
                //hobbys[i].checked = !hobbys[i].checked;
            }

        }
    </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="python">Python
    <input type="checkbox" name="hobby" value="js">javaScript
    <p></p>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNone()">全部取消</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>